

<!DOCTYPE html>
<html>
<head>
    {{include file="lib/page_head" /}}
    <style>
        .layui-tab-item{height:100px;}
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    {{include file="lib/page_header" /}}
    {{include file="lib/page_left" /}}
    <div class="layui-tab layui-tab-card" lay-filter="main-tab" id="main-tab">
        <ul class="layui-tab-title site-demo-title ">
            <li class="layui-this" lay-id="/index/home">首页</li>
        </ul>
        <div class="layui-body layui-tab-content site-demo site-demo-body"  >

            <div class="layui-tab-item layui-show">

                    <iframe style="width:100%;height:99.5%" src="/index/home" frameborder="0">
                    </iframe>

            </div>
        </div>
    </div>
    <div class="layui-footer footer footer-demo">
        <div class="layui-main">
            <p>&copy; 2017 <a href="/">layui.com</a> MIT license</p>

        </div>
    </div>
    <div class="site-tree-mobile layui-hide">
        <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>


</div>
<script src="../layui/layui.js?t=1498856285724" charset="utf-8"></script>
<script src="../layui/global.js?t=1498856285724" charset="utf-8"></script>
<script src="../js/jquery-1.12.4.js" charset="utf-8"></script>
<script src="../js/commen.js"></script>
<script>
    var element = null;
    layui.use('element', function(){
        element = layui.element(); //Tab的切换功能，切换事件监听等，需要依赖element模块
    });
    $(function () {
        $("#page_left .layui-nav li a").click(function () {
            var href = $(this).attr("data-href");
            var title = $(this).html();
            if(href&&$("#main-tab .layui-tab-title li[lay-id='"+href+"']").length<1)
            {
                var content = '';
                content += '<iframe style="width:100%;height:100%" src="'+href+'" frameborder="0"> </iframe>';
                element.tabAdd('main-tab', {
                    title: title //用于演示
                    ,content: content
                    ,id: href //实际使用一般是规定好的id，这里以时间戳模拟下
                });
            }
            element.tabChange('main-tab', href);
        });

        $("body").height($(document).height());
//        $(".layui-footer").css({"position": "fixed","bottom":0,""})


    });
</script>
</body>
</html>